<template>
	<div id="manageAuction">
		<p class="Title">拍卖管理</p>
		<!---------筛选栏---------->
		<div class="screen">
			<p>平台类型</p>
			<div class="type1">
				<el-select v-model="platform" placeholder="请选择">
				    <el-option
				        v-for="item in platformList"
				        :key="item.value"
				        :label="item.label"
				        :value="item.value">
				    </el-option>
				</el-select>
			</div>
			<p>活动管理</p>
			<input class="activity_name" type="text" placeholder="请输入活动名称" v-model="taskName"/>
			<div class="screen_sub" @click="search">
				<img src="../../static/img/good-02.png"/>
				<p>活动搜索</p>
			</div>
		</div>
		<!---------活动状态筛选------------>
		<ul class="screen2">
			<li @click="screen2 = -1" :class="screen2 == -1?'screen2_active':''">
				全部
			</li>
			<span></span>
			<li @click="screen2 = 0" :class="screen2 == 0?'screen2_active':''">
				待支付
			</li>
			<li @click="screen2 = 1" :class="screen2 == 1?'screen2_active':''">
				进行中
			</li>
			<li @click="screen2 = 2" :class="screen2 == 2?'screen2_active':''">
				已结束
			</li>
			<li @click="screen2 = 3" :class="screen2 == 3?'screen2_active':''">
				已驳回
			</li>
			<li @click="screen2 = 4" :class="screen2 == 4?'screen2_active':''">
				已发完
			</li>
		</ul>
		<!---------活动参数标题------------->
		<div class="task_title">
			<p>活动名称</p>
			<p>开始时间</p>
			<p>活动进展</p>
			<p>活动操作</p>
			<p>用户操作</p>
		</div>
		<!----------活动列表---------------->
		<div class="task_list">
			<div v-for="item in taskList" class="task_item">
				<!--------活动名称-------------->
				<div class="task_information">
					<img :src="item.task.goodsImage"/>
					<div class="task_text">
						<div class="task_name">
							<img v-if="item.task.paltform == 1" src="../../static/img/tb.png"/>
							<img v-else-if="item.task.paltform == 2" src="../../static/img/tm.png"/>
							<img v-else-if="item.task.paltform == 3" src="../../static/img/jd.png"/>
							<p>{{item.task.taskName}}</p>
						</div>
						<p>{{item.task.remark}}</p>
					</div>
				</div>
				<!--------开始时间--------->
				<div class="task_time">
					{{getDate(item.task.releasetime)}}
				</div>
				<!--------活动进展--------->
				<div class="task_evolve">
					<p v-if="item.task.status == 0">等待支付</p>
					<p v-else-if="item.task.status == 1">进行中</p>
					<p v-else-if="item.task.status == 2">已结束</p>
					<p v-else-if="item.task.status == 3">已驳回</p>
					<p v-else-if="item.task.status == 4">已发完</p>
				</div>
				<!------活动操作--------->
				<div class="task_operation">
					<!------待支付-------->
					<p v-if="item.task.status == 0 || item.task.status==2 || item.task.status==3" class="no_operation">--</p>
					<!------进行中-------->
					<p v-else-if="item.task.status == 1 || item.task.status==4">今天发放总份数：{{item.taskList==null?0:item.taskList.releaseNum}}</p>
				</div>
				<!------用户操作----------->
				<div class="user_operation">
					<div v-if="item.task.status == 0" class="task_pay">
						<input type="button" value="支付" @click="payTask(item.task.id,item.task.taskPrice)"/>
						<div>
							<router-link :to="{path:'/agent/releaseAuction',query:{id:item.task.id}}">编辑活动</router-link>
							<p @click="deleteTask(item.task.id)">删除</p>
						</div>
					</div>
					<div v-else class="task_btns">
						<input type="button" value="进度操作" @click="opera(item.task.id)"/>
						<input type="button" value="再发一份" @click="editAgain(item.task.id)"/>
						<div>
							<p @click="open">撤销活动</p>
						</div>
					</div>
				</div>
			</div>
			<el-pagination
				v-if="taskList.length>0"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<!----------没有数据了------------>
			<div v-else class="noData">
				<img src="../../static/img/nodata.png"/>
			</div>
		</div>
		<!------------撤销理由-------------->
		<div v-if="vtextarea" id="vtextarea">
			<div class="vtextarea">
				<textarea placeholder="请输入撤销理由"></textarea>
				<div class="btns">
					<input @click="close" type="button" value="取消" />
					<input type="button" value="确定" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'manageAuction',
	data:function(){
		return{
			platform: '0',//平台类型
			taskName:'',//活动名称动态搜索
			type:0,//活动类型
			total: 0,//总条数
			pageSize: 10,//每页条数
			currentPage: 1,//当前页码
			platformList:[
				{
		            value: 0,
		            label: '全部'
		        },
		        {
		            value: 1,
		            label: '淘宝'
		        },
		        {
		            value: 2,
		            label: '天猫'
		        },
		        {
		            value: 3,
		            label: '京东'
		        }
	        ],
	        activity: 0,
	        screen2: -1,//活动状态搜索参数
	        taskList: [//任务列表
	        	{
	        		Src: '../../static/img/avatar.jpg',
	        		platform: 3,
	        		taskName: '美的电饭煲',
	        		note: '备注',
	        		startTime: '2018-08-01 06:05:30',
	        		evolve: 1,
	        		allNum: 100,
	        		task:{
	        			goodsImage:'',
	        		}
	        	},
	        	{
	        		Src: '../../static/img/avatar.jpg',
	        		platform: 1,
	        		name: '美的电饭煲',
	        		note: '备注',
	        		startTime: '2018-08-01 06:05:30',
	        		evolve: 2,
	        		allNum: 100,
	        		task:{
	        			goodsImage:'',
	        		}
	        	},
	        ],
	        vtextarea: false,//理由输入框显示隐藏
		}
	},
	methods:{
		showTask:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				status:_this.screen2,
				paltform:_this.platform,
				taskName:_this.taskName,
				type:_this.activity,
	        	startPage:_this.currentPage,
	        	pageSize:_this.pageSize
	        })
			_this.$axios.post('/agent/auctionTask/taskList',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.taskList = data.result;
				}else{
					_this.$alert("2",data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		countTask:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				status:_this.screen2,
				paltform:_this.platform,
				taskName:_this.taskName,
				type:_this.activity
	        })
			_this.$axios.post('/agent/auctionTask/countTaskList',postData).then(function(res){
				var data = res.data;
				if(data.message=="succ"){
					_this.total = data.result;
				}else{
					_this.$alert("2",data.result);
				}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		search:function(){
			this.showTask();
			this.countTask();
		},
		payTask:function(obj,taskPrice){
			var _this = this;
			_this.$confirm('确定支付','需要支付'+taskPrice+'元',function(){
				_this.$loading.show();
				var postData = _this.$qs.stringify({
					taskId:obj
		        })
				_this.$axios.post('/agent/auctionTask/pay',postData).then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						_this.$alert("1",data.result);
						_this.showTask();
						_this.$loading.hide();
					}else if(data.message=="warning"){
						_this.$loading.hide();
						_this.$confirm('充值','账户余额不足，是否充值',function(){
							_this.$router.push({path:'/agent/recharge'});
						});
					}else{
						_this.$loading.hide();
						_this.$alert("2",data.result);
					}
				}).catch(function (error) {
				    console.log(error);
				});
			});
		},
		deleteTask:function(obj){
			var _this = this;
			_this.$confirm("删除","删除不可恢复，确定删除？",function(){
				var postData = _this.$qs.stringify({
					taskId:obj
	        	})
				_this.$axios.post('/agent/auctionTask/delete',postData).then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						_this.$alert("1",data.result);
						_this.showTask();
						_this.countTask();
					}else{
						_this.$alert("2",data.result);
					}
				}).catch(function (error) {
				    console.log(error);
				});
			});
		},
		open: function(){
			this.vtextarea = true;
		},
		close: function(){
			this.vtextarea = false;
		},
		opera:function(obj){
			this.$router.push({path:'/agent/detailAuction/userListAuction?taskId='+obj})
		},
		editAgain:function(obj){
			this.$router.push({path:'/agent/releaseAuction?id='+obj});
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	    	this.currentPage=val;
	    	this.showTask();
	    },
	    //--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		}
	},
	created:function(){
		var Id = this.$route.query.id;
		if(!Id){
			Id = 0;
		}
		this.platform = parseInt(Id);
		this.showTask();
		this.countTask();
	},
	watch:{
		'$route'(){
			this.platform = this.$route.query.id;
			this.currentPage = 1;
		},
		platform(){
			if(this.activity==0){
				this.search();
			}else{
				this.activity = 0;
			}
		},
		activity(){
			this.search();
		},
		screen2(){
			this.search();
		}
	}
}
</script>

<style>
/*-----------分页器样式------------*/
.el-pagination{
	text-align: center;
	margin-top: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E;
}
.el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E;
}
</style>
<style>
/*-----下拉框样式修改--------*/
.type1 .el-select{
	width: 120px!important;
}
.type2 .el-select{
	width: 180px!important;
}
.screen .el-input__inner{
	height: 30px!important;
	line-height: 30px!important;
	border: 1px solid #E6E6E6!important;
	border-radius: 0!important;
}
.screen .el-input__icon{
	height: auto!important;
	line-height: 30px!important;
}
.screen .el-select-dropdown__item.selected{
	color: #FF464E!important;
}
.screen .el-select .el-input.is-focus .el-input__inner{
	border-color: #e6e6e6!important;
}
.screen .el-select .el-input__inner:focus{
	border-color: #e6e6e6!important;
}
</style>


<style scoped>
#manageAuction{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
/*-------筛选栏-------*/
.screen{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.screen p{
	color: #545454;
}
.screen .el-select{
	margin: 0 10px;
}
.activity_name{
	width: 300px;
	height: 30px;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
	padding-left: 10px;
	margin: 0 10px;
}
.activity_list{
	width: 180px;
}
.screen_sub{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #E6E6E6;
	width: 120px;
	height: 30px;
	box-sizing: border-box;
	cursor: pointer;
}
.screen_sub img{
	height: 14px;
	display: block;
	margin-right: 3px;
}
.screen_sub p{
	color: #808080;
}
/*-----------活动状态筛选--------------*/
.screen2{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.screen2 li{
	margin: 0 15px;
	cursor: pointer;
}
.screen2 span{
	height: 15px;
	width: 1px;
	background-color: #E6E6E6;
}
.screen2_active{
	color: #FF464E;
}
/*--------活动参数标题-----------*/
.task_title{
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	height: 30px;
	margin-top: 10px;
}
.task_title p{
	width: 20%;
	text-align: center;
}
/*-------活动列表---------*/
.task_item{
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #E6E6E6;
}
.task_item>div{
	width: 20%;
}
.task_information{
	display: flex;
	align-items: center;
}
.task_information>img{
	height: 50px;
	width: 50px;
	display: block;
	margin-right: 10px;
}
.task_text{
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #808080;
	width: calc(100% - 60px);
}
.task_name{
	display: flex;
	align-items: center;
	width: 100%;
}
.task_name img{
	height: 14px;
	display: block;
	margin-right: 5px;
}
.task_name p{
	width: calc(100% - 19px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task_time{
	text-align: center;
	color: #808080;
}
.task_evolve{
	text-align: center;
	color: #FF464E;
}
.task_operation>p{
	text-align: center;
	color: #f29e5a;
}
.task_pay{
	display: flex;
	flex-direction: column;
	height: 50px;
	justify-content: center;
	align-items: center;
}
.task_pay>input{
	width: 100px;
	height: 25px;
	background-color: #FF464E;
	border-radius: 3px;
	color: #FFFFFF;
	border: none;
}
.task_pay div{
	display: flex;
	justify-content: space-between;
	width: 100px;
	margin-top: 5px;
}
.task_pay div a{
	color: #f29e5a;
}
.task_pay div p{
	color: #FF464E;
}
.user_operation{
	display: flex;
	justify-content: center;
	align-items: center;
}
.no_operation{
	color: #808080;
	font-size: 24px;
}
.task_btns{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.task_btns input:first-child{
	margin-bottom: 10px;
	width: 100px;
	height: 25px;
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
	border-radius: 3px;
}

.task_btns input:nth-child(2){
	width: 100px;
	height: 25px;
	border: 1px solid #FF464E;
	background-color: #FFFFFF;
	color: #FF464E;
	border-radius: 3px;
}
.task_btns div{
	display: flex;
	justify-content: flex-start;
	width: 100px;
	margin-top: 5px;
}
.task_btns div p{
	color: #f29e5a;
	cursor: pointer;
}
/*------------分页-----------*/
.paging{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 30px;
}
.last,.next,.paging_list li{
	width: 30px;
	height: 30px;
	border: 1px solid #E6E6E6;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9F9F9F;
	box-sizing: border-box;
	cursor: pointer;
}
.last img,.next img{
	height: 18px;
	display: block;
}
.next,.paging_list li{
	margin-left: 8px;
}
.paging_list{
	display: flex;
}
.topaging{
	display: flex;
	align-items: center;
	margin-left: 8px;
}
.topaging p{
	color: #9F9F9F;
}
.topaging input[type='text']{
	width: 30px;
	height: 30px;
	text-align: center;
	border: 1px solid #E6E6E6;
	margin: 0 5px;
	background-color: transparent;
	color: #5E5E5E;
}
.topaging input[type='button']{
	height: 30px;
	width: 60px;
	border: 1px solid #E6E6E6;
	background-color: transparent;
	margin-left: 8px;
	color: #5E5E5E;
}
span.paging_active,li.paging_active{
	background-color: #FF464E;
	color: #FFFFFF;
	border: none;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
/*---------输入撤销理由---------*/
#vtextarea{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vtextarea{
	width: 400px;
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	box-sizing: border-box;
}
.vtextarea textarea{
	width: 100%;
	height: 100px;
	border: none;
	resize: none;
	font-size: 14px;
}
.vtextarea .btns{
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.vtextarea .btns input{
	width: 80px;
	height: 26px;
	border-radius: 3px;
}
.vtextarea .btns input:first-child{
	border: 1px solid #FF464E;
	background-color: #fff;
	color: #FF464E;
	margin-right: 20px;
}
.vtextarea .btns input:last-child{
	border: none;
	background-color: #FF464E;
	color: #FFFFFF;
}
</style>
